<template>
  <div class="homepage-container">
    <!-- 顶部功能卡片区域 -->
    <div class="dashboard-cards">
      <div 
        v-for="(card, index) in functionCards" 
        :key="index"
        class="card"
        @click="handleCardClick(card)"
      >
        <div class="card-icon-wrapper">
          <img v-if="card.isImage" :src="card.icon" class="icon-image" />
          <i v-else :class="card.icon" class="icon"></i>
        </div>
        <div class="title">{{ card.title }}</div>
        <div class="arrow">
          <i class="fas fa-chevron-right"></i>
        </div>
      </div>
    </div>

    <!-- 图表区域 -->
    <div class="chart-section">
      <div class="chart-card">
        <div class="chart-card-header">
          <div class="title">近30天费用占比</div>
          <i class="fas fa-sync-alt refresh-icon"></i>
        </div>
        <div class="chart-content">
          <div class="chart-placeholder">
            <div class="value">16,112.90</div>
            <div class="label">总金额</div>
          </div>
          <div class="chart-legend">
            <ul>
              <li v-for="(item, index) in expenseData" :key="index">
                <span class="color-box" :style="{ backgroundColor: item.color }"></span>
                <span class="label">{{ item.name }}</span>
                <span class="value">{{ item.value }}</span>
                <span class="percent">{{ item.percent }}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="chart-card">
        <div class="chart-card-header">
          <div class="title">缴费类型</div>
          <i class="fas fa-sync-alt refresh-icon"></i>
        </div>
        <div class="chart-content">
          <div class="chart-placeholder chart2">
            <div class="value">16,112.90</div>
            <div class="label">总金额</div>
          </div>
          <div class="chart-legend">
            <ul>
              <li><span class="color-box" style="background-color: #1890ff;"></span> <span class="label">预存</span> <span class="value">{{ paymentStats.prepaid }}</span></li>
              <li><span class="color-box" style="background-color: #faad14;"></span> <span class="label">退费</span> <span class="value">{{ paymentStats.refund }}</span></li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <!-- 数据列表区域 -->
    <div class="data-list-section">
      <div class="data-list-card">
        <div class="data-list-item gateway-item">
          <div class="device-icon-wrapper gateway">
            <i class="el-icon-cpu icon"></i>
          </div>
          <div class="content">
            <div class="title">采集网关</div>
            <div class="status">
              <span class="online"><span class="status-dot online-dot"></span>在线数量: {{ deviceStatus.gateway.online }}</span>
              <span class="offline"><span class="status-dot offline-dot"></span>离线数量: {{ deviceStatus.gateway.offline }}</span>
            </div>
          </div>
        </div>
        <div 
          v-for="(device, index) in deviceList" 
          :key="index"
          class="data-list-item"
        >
          <div class="device-icon-wrapper" :class="device.type">
            <img v-if="device.isImage" :src="device.icon" class="icon-image" />
            <i v-else :class="device.icon" class="icon"></i>
          </div>
          <div class="content">
            <div class="title">{{ device.name }}</div>
            <div class="status">
              <span class="online"><span class="status-dot online-dot"></span>在线数量: {{ device.online }}</span>
              <span class="offline"><span class="status-dot offline-dot"></span>离线数量: {{ device.offline }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="table-card">
        <table class="data-table">
          <thead>
            <tr>
              <th>序号</th>
              <th>租户名称</th>
              <th>余额</th>
              <th>预警余额</th>
              <th>费控余额</th>
              <th>预警时间</th>
              <th>是否缴费</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(user, index) in userList" :key="index">
              <td>{{ user.id }}</td>
              <td>{{ user.username }}</td>
              <td>{{ user.balance }}</td>
              <td>{{ user.prepayment }}</td>
              <td>{{ user.paymentAmount }}</td>
              <td>{{ user.paymentTime }}</td>
              <td>{{ user.isOverdue ? '否' : '是' }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'IndexOptimized',
  data() {
    return {
      // 功能卡片数据
      functionCards: [
        { title: '充值缴费', icon: 'el-icon-wallet', route: '/finance/charge-billing', isImage: false },
        { title: '一键开户', icon: 'el-icon-user-solid', route: '/tenant/account-management', isImage: false },
        { title: '账单查询', icon: 'el-icon-document', route: '/finance/charge-record', isImage: false },
        { title: '电表管理', icon: 'el-icon-lightning', route: '/device/electric-meter', isImage: false },
        { title: '水表管理', icon: 'el-icon-water-cup', route: '/device/water-meter', isImage: false },
        { title: '保电管理', icon: 'el-icon-setting', route: '/system/operation-record', isImage: false }
      ],
      
      // 费用占比数据
      expenseData: [
        { name: '聚合', value: '0.00', percent: '0.00%', color: '#1890ff' },
        { name: '微信', value: '0.00', percent: '0.00%', color: '#52c41a' },
        { name: '支付宝', value: '0.00', percent: '0.00%', color: '#faad14' },
        { name: '现金', value: '0.00', percent: '100.00%', color: '#f5222d' },
        { name: '银联', value: '0.00', percent: '0.00%', color: '#2f54eb' }
      ],
      
      // 缴费类型统计
      paymentStats: {
        prepaid: '19,327.00',
        refund: '19,327.00'
      },
      
      // 设备状态
      deviceStatus: {
        gateway: {
          online: 112,
          offline: 4
        }
      },
      
      // 设备列表
      deviceList: [
        { name: '4G模块', icon: 'el-icon-connection', type: 'signal', online: 112, offline: 4, isImage: false },
        { name: '电表数量', icon: 'el-icon-lightning', type: 'electric', online: 112, offline: 4, isImage: false },
        { name: '水表数量', icon: 'el-icon-water-cup', type: 'water', online: 112, offline: 4, isImage: false }
      ],
      
      // 用户列表数据
      userList: [
        { id: 1, username: '李子明', balance: '36.00', prepayment: '30.00', paymentAmount: '20.00', paymentTime: '2025-05-02 15:30.00', isOverdue: false },
        { id: 2, username: '李子明', balance: '36.00', prepayment: '30.00', paymentAmount: '20.00', paymentTime: '2025-05-02 15:30.00', isOverdue: false },
        { id: 3, username: '李子明', balance: '36.00', prepayment: '30.00', paymentAmount: '20.00', paymentTime: '2025-05-02 15:30.00', isOverdue: false },
        { id: 4, username: '李子明', balance: '36.00', prepayment: '30.00', paymentAmount: '20.00', paymentTime: '2025-05-02 15:30.00', isOverdue: false },
        { id: 5, username: '李子明', balance: '36.00', prepayment: '30.00', paymentAmount: '20.00', paymentTime: '2025-05-02 15:30.00', isOverdue: false },
        { id: 6, username: '李子明', balance: '36.00', prepayment: '30.00', paymentAmount: '20.00', paymentTime: '2025-05-02 15:30.00', isOverdue: false },
        { id: 7, username: '李子明', balance: '36.00', prepayment: '30.00', paymentAmount: '20.00', paymentTime: '2025-05-02 15:30.00', isOverdue: false },
        { id: 8, username: '李子明', balance: '36.00', prepayment: '30.00', paymentAmount: '20.00', paymentTime: '2025-05-02 15:30.00', isOverdue: false },
        { id: 9, username: '李子明', balance: '36.00', prepayment: '30.00', paymentAmount: '20.00', paymentTime: '2025-05-02 15:30.00', isOverdue: false },
        { id: 10, username: '李子明', balance: '36.00', prepayment: '30.00', paymentAmount: '20.00', paymentTime: '2025-05-02 15:30.00', isOverdue: false }
      ]
    }
  },
  
  methods: {
    // 处理功能卡片点击
    handleCardClick(card) {
      this.$router.push(card.route)
    }
  }
}
</script>

<style scoped>
.homepage-container {
  padding: 24px;
  background-color: #f0f2f5;
  min-height: 100vh;
}

.dashboard-cards {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}

.card {
  background-color: #fff;
  padding: 24px 20px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.card-icon-wrapper {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: #1890ff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
}

.card .icon {
  font-size: 28px;
  color: #fff;
}

.card .icon-image {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.card .title {
  font-size: 16px;
  color: #333;
  font-weight: 600;
  margin-bottom: 8px;
}

.card .arrow {
  position: absolute;
  top: 12px;
  right: 12px;
  color: #bfbfbf;
  font-size: 14px;
}

.chart-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

.chart-card {
  background-color: #fff;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
  min-height: 320px;
}

.chart-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.chart-card-header .title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.chart-card-header .refresh-icon {
  font-size: 18px;
  cursor: pointer;
  color: #666;
  transition: color 0.3s ease;
}

.chart-card-header .refresh-icon:hover {
  color: #1890ff;
}

.chart-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(100% - 60px);
}

.chart-placeholder {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 20px solid #e6f7ff;
  border-top-color: #1890ff;
  border-right-color: #faad14;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #333;
  position: relative;
}

.chart-placeholder.chart2 {
  border-top-color: #1890ff;
  border-right-color: #1890ff;
  border-bottom-color: #faad14;
  border-left-color: #faad14;
}

.chart-placeholder .value {
  font-size: 28px;
  color: #333;
  font-weight: 700;
}

.chart-placeholder .label {
  font-size: 16px;
  color: #666;
  margin-top: 4px;
}

  .chart-legend {
    flex: 1;
    margin-left: 40px; /* 增加左边距，让颜色点与图表有距离 */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 左对齐 */
  }

  .chart-legend ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%; /* 确保ul宽度占满 */
  }

  .chart-legend li {
    display: flex;
    align-items: center;
    margin-bottom: 12px; /* 增加行间距 */
    font-size: 15px;
    width: 100%;
    justify-content: flex-start; /* 左对齐 */
  }

  .chart-legend li .color-box {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 12px; /* 增加颜色点与文字的间距 */
    flex-shrink: 0;
    margin-top: 2px; /* 调整此值以对齐 */
  }

  .chart-legend li .label {
    color: #555;
    margin-right: 8px; /* 适当间距 */
    min-width: 50px; /* 调整最小宽度 */
    text-align: left; /* 标签左对齐 */
  }

  .chart-legend li .value {
    margin-left: 8px; /* 适当间距 */
    color: #333;
    font-weight: 600;
    text-align: left; /* 数值左对齐 */
    min-width: 60px; /* 调整最小宽度 */
  }

  .chart-legend li .percent {
    margin-left: 8px; /* 适当间距 */
    color: #666;
    font-size: 14px;
    min-width: 50px; /* 调整最小宽度 */
    text-align: left; /* 百分比左对齐 */
  }

.data-list-section {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 24px;
}

.data-list-card {
  background-color: #fff;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
}

.data-list-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding: 16px;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

.data-list-item:hover {
  background-color: #f8f9fa;
}

.data-list-item:last-child {
  margin-bottom: 0;
}

.device-icon-wrapper {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: #1890ff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.25);
}

.device-icon-wrapper.gateway {
  background: #1890ff;
}

.device-icon-wrapper.signal {
  background: #1890ff;
}

.device-icon-wrapper.electric {
  background: #1890ff;
}

.device-icon-wrapper.water {
  background: #1890ff;
}

.device-icon-wrapper .icon {
  font-size: 24px;
  color: #fff;
}

.device-icon-wrapper .icon-image {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.data-list-item .content {
  flex-grow: 1;
}

.data-list-item .title {
  font-size: 17px;
  font-weight: 600;
  color: #333;
  margin-bottom: 6px;
}

.data-list-item .status {
  font-size: 15px;
  color: #666;
}

.data-list-item .status .online {
  color: #52c41a;
  margin-right: 16px;
  font-weight: 500;
}

.data-list-item .status .offline {
  color: #f5222d;
  font-weight: 500;
}

.table-card {
  background-color: #fff;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 14px 12px;
  border-bottom: 1px solid #f0f0f0;
  text-align: left;
  font-size: 15px;
  color: #333;
}

.data-table th {
  background-color: #fafafa;
  font-weight: 600;
  color: #555;
  font-size: 16px;
}

.data-table tbody tr:hover {
  background-color: #f8f9fa;
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .dashboard-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .dashboard-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .chart-section {
    grid-template-columns: 1fr;
  }
  
  .data-list-section {
    grid-template-columns: 1fr;
  }
}
</style>



.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
}

.online-dot {
  background-color: #52c41a;
}

.offline-dot {
  background-color: #f5222d;
}


